<template>
  <section class="task_cost_detail">
    <div class="tit">费用列表</div>
    <div class="item top">
      <span>费用名称</span>
      <span>费用状态</span>
      <i>操作</i>
    </div>
    <van-list finished-text="">
      <div class="item" v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.costStatusDesc }}</span>
        <i @click="download(item.costUrl)">下载</i>
      </div>
    </van-list>
  </section>
</template>
<script>
import { getJobCostList } from '@/api/company'
export default {
  name: 'TaskCostDetail',
  data() {
    return {
      list: [],
    }
  },
  computed: {
    jobId() {
      return this.$route.params.jobId
    },
  },
  created() {
    this.getJobCostList()
  },
  methods: {
    async getJobCostList() {
      const res = await getJobCostList(this.jobId)
      this.list = res || []
    },
    download(costUrl) {
      window.open(costUrl)
    },
  },
}
</script>
<style lang="less" scoped>
.task_cost_detail {
  padding-top: 10px;
  .tit {
    display: flex;
    font-size: 16px;
    color: #000;
    height: 40px;
    align-items: center;
    justify-content: center;
  }
  .item {
    background: white;
    padding: 5px 20px;
    // margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    align-items: center;
    color: #333;
    font-size: 14px;

    i {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      font-style: normal;
      // width: 150px;
      color: #7ac5ef;
    }
    span,
    i {
      display: inline-flex;
    }
    span {
      width: 30%;
      &:first-child {
        justify-content: flex-start;
      }
      &:last-child {
        justify-content: center;
      }
    }
    i {
      width: 20%;
      justify-content: flex-end;
    }
  }
  .top {
    color: #000;
    i {
      color: #000;
    }
  }
}
</style>